<script setup lang="ts">
import { useAppStore } from '@/home/stores/app';
import { formatNumber } from '@/home/utils/format';
import { gotoLoginForClient } from '@/common/utils/auth';
import defaultImg from '@/home/assets/home/default.png';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();
const atomgitUrl = import.meta.env.VITE_ATOMGIT_URL;

const appStore = useAppStore();
const communityInfo = appStore.config;

function getGreeting() {
  const now = new Date();
  const hours = now.getHours();

  if (hours >= 5 && hours <= 10) {
    return  t('home.home.template3.notice1');
  } else if (hours >= 11 && hours <= 13) {
    return t('home.home.template3.notice2');
  } else if (hours >= 14 && hours <= 18) {
    return  t('home.home.template3.notice3');
  } else {
    return  t('home.home.template3.notice4');
  }
}

const login = () => {
  gotoLoginForClient();
}
</script>

<template>
  <div class="h-400 w-288 rounded-6 bg-[linear-gradient(136deg,#7AC0FD_0%,#009AFF_100%)] p-32 shadow-[0_1px_6px_0_rgba(0,0,0,0.04)]">
    <div class="size-52 flex-y-center justify-center border-1 border-[#fff] rounded-50%">
      <img :src="appStore.user.photo || defaultImg" :alt="appStore.user.nickname || ''" class="size-48 rounded-50%">
    </div>
    <div>
      <p v-if="appStore.user.id" class="mt-24 truncate text-24 text-[#fff] font-600 leading-36">{{ appStore.user.nickname }}</p>
      <ClientOnly v-else>
        <p class="mt-24 text-24 text-[#fff] font-600 leading-36">{{ getGreeting() }}</p>
      </ClientOnly>
    </div>
    <p class="mt-16 truncate text-16 text-[#fff] font-400 leading-24">{{ $t('home.home.template3.welcome', { communityName: communityInfo.name }) }}</p>

    <ul class="mt-32 flex justify-between">
      <li class="w-50 text-center color-hex-fff">
        <div class="text-16 font-600 leading-24">{{ formatNumber(communityInfo.userNumber) }}</div>
        <div class="mt-16 text-12 font-400 leading-24">{{ $t('home.home.communityData.people.title') }}</div>
      </li>
      <li class="w-50 text-center color-hex-fff">
        <div class="text-16 font-600 leading-24">{{ formatNumber(communityInfo.communityWarehouseNumber) }}</div>
        <div class="mt-16 text-12 font-400 leading-24">{{ $t('home.home.communityData.repository.title') }}</div>
      </li>
      <li class="w-50 text-center color-hex-fff">
        <div class="text-16 font-600 leading-24">{{ formatNumber(communityInfo.communityOrgNumber) }}</div>
        <div class="mt-16 text-12 font-400 leading-24">{{ $t('home.home.communityData.organization.title') }}</div>
      </li>
    </ul>

    <div class="mt-52">
      <template v-if="!appStore.user.id">
        <button type="button" class="h-36 w-full rounded-18 bg-[#FFCD27] text-12 text-[#292929] font-500 leading-16" @click="login">{{ $t('home.home.template3.login') }}</button>
      </template>

      <template v-else>
        <a :href="`${atomgitUrl}/${appStore.user.username}`" target="_blank" class="block h-36 w-full rounded-18 bg-[#FFCD27] text-center text-12 text-[#292929] font-500 leading-36">
          {{ $t('home.home.template3.home') }}
        </a>
      </template>
    </div>

  </div>
</template>

<style lang="scss" scoped>
</style>
